<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
</head>
<body>
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-title">
            修改密码
        </div>
        <div class="panel-body">
            <!-- Start Row -->
            <div class="row">

                <div id="myForm" class="form-horizontal">
                    <div :class="clazz.oldPasswordClazz">
                        <label for="oldPassword" class="col-sm-2 control-label form-label">原密码</label>
                        <div class="col-sm-9">
                            <input @change="initClazz($event)" type="password" class="form-control" id="oldPassword" v-model="oldPassword" />
                        </div>
                    </div>
                    <div :class="clazz.passwordClazz">
                        <label for="password" class="col-sm-2 control-label form-label">新密码</label>
                        <div class="col-sm-9">
                            <input @change="initClazz($event)" type="password" class="form-control" id="password" v-model="password" />
                        </div>
                    </div>
                    <div :class="clazz.confirmPasswordClazz">
                        <label for="confirmPassword" class="col-sm-2 control-label form-label">确定密码</label>
                        <div class="col-sm-9">
                            <input @change="initClazz($event)" type="password" class="form-control" id="confirmPassword" v-model="confirmPassword" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-9">
                            <button id="saveBtn" @click="save()" style="width: 100%" type="button" class="btn btn-default">保存</button>
                        </div>
                    </div>
                </div>

            </div>
            <!-- End Row -->
        </div>
    </div>
</div>

<script>
    $(function () {
        //方法
        var methods = {
            //保存用户信息
            save:function () {
                if(isEmpty(this.oldPassword)){
                    spop("原密码不能为空", 'error');
                    this.$set(this.clazz,'oldPasswordClazz','form-group has-error');
                    return;
                }
                if(this.oldPassword.length>32){
                    spop("原密码过长", 'error');
                    this.$set(this.clazz,'oldPasswordClazz','form-group has-error');
                    return;
                }
                if(isEmpty(this.password)){
                    spop("新密码不能为空", 'error');
                    this.$set(this.clazz,'passwordClazz','form-group has-error');
                    return;
                }
                if(this.password.length>32){
                    spop("新密码过长", 'error');
                    this.$set(this.clazz,'passwordClazz','form-group has-error');
                    return;
                }
                if(isEmpty(this.confirmPassword)){
                    spop("确认密码不能为空", 'error');
                    this.$set(this.clazz,'confirmPasswordClazz','form-group has-error');
                    return;
                }
                if(this.confirmPassword.length>32){
                    spop("确认密码过长", 'error');
                    this.$set(this.clazz,'confirmPasswordClazz','form-group has-error');
                    return;
                }
                if(this.confirmPassword!==this.password){
                    spop("新密码与确认密码不一致", 'error');
                    this.$set(this.clazz,'passwordClazz','form-group has-error');
                    this.$set(this.clazz,'confirmPasswordClazz','form-group has-error');
                    return;
                }

                var _this = this;
                post('/service/sysUser/resetUserPassword',function (result) {
                    if(result.success) {
                        spop({
                            template: '密码修改成功',
                            autoclose: 5000,
                            style:'success'
                        });
                        Vue.set(myFormApp, 'oldPassword', null);
                        Vue.set(myFormApp, 'password', null);
                        Vue.set(myFormApp, 'confirmPassword', null);
                    }else {
                        spop(result.message, 'error');
                    }
                },{
                    oldPassword: _this.oldPassword,
                    password: _this.password,
                    confirmPassword: _this.confirmPassword
                });
            },
            //初始化输入框样式 change时调用
            initClazz:function (event) {
                var id = event.target.id;
                if(this.clazz[id+'Clazz']!=='form-group'){
                    this.$set(this.clazz, id+'Clazz', 'form-group');
                }
            }
        }
        //表单vue
        var myFormApp = new Vue({
            el:'#myForm',
            //属性
            data:{
                clazz:{
                    oldPasswordClazz:'form-group',
                    passwordClazz:'form-group',
                    confirmPasswordClazz:'form-group'
                },
                oldPassword:null,
                password:null,
                confirmPassword:null
            },
            methods: methods,
            mounted:function () {},
            updated: function () {}
        });
    });
</script>
</body>
</html>